<template>
	<view class="staff">
		<view class="sticky-top search-nav" >
			<u-search
				v-model="searchValue" 
				:inputStyle="{'font-size': '28rpx'}" 
				:actionStyle="{'font-size': '28rpx', 'width': '80rpx'}"
				bgColor="#fff" 
				height="64" 
				searchIconColor="#999" 
				searchIconSize="40rpx" 
				placeholderColor="#999" 
				placeholder="名称搜索" 
				@clear="handleFilter"
				@search="handleFilter" 
				@custom="handleFilter" 
			></u-search>
		</view>
		
		<process-frame
			:loading="loading" 
			:error="error" 
			:errorMsg="errorMsg" 
			:empty="empty" 
			emptyText="暂无员工" 
			:errorBtn="errorBtn" 
			@errorclick="handleFilter"
		>
			<view class="p-20">
				<view class="m-b-20" v-for="item in staffList" :key="item.id">
					<view class="staff-item" @click="handleUpdate(item)">
						<custom-image
							src="" 
							width="160rpx" 
							height="160rpx" 
							radius="12rpx" 
							mode="aspectFill" 
						></custom-image>
						<view class="staff-content">
							<view class="staff-title u-line-1">{{ item.staffName }}</view>
							<view class="staff-label">岗位：{{ PostTypeLabel[item.postId] || '-' }}</view>
							<view class="staff-label">手机号码：{{ item.mobile }}</view>
							<view class="staff-label">注册日期：{{ item.addTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</process-frame>
		
		<float-btn icon="plus" text="新增员工" @click="handleCreate"></float-btn>
	</view>
</template>

<script>
	import processFrame from '@/mixins/process-frame.js'
	import { staffList, staffDel } from '@/api/staff.js'
	import { PostTypeLabel } from '@/utils/enum.js'
	
	const queryParams = {
		pageNum: 1,
		pageSize: 10,
	}
	
	export default {
		mixins: [processFrame],
		data() {
			return {
				staffList: [],
				searchValue: '',
				PostTypeLabel,
			}
		},
		computed: {
			empty() {
				return !this.staffList || this.staffList.length == 0
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			try {
				queryParams.pageNum = 1
				await this.getList()
			} finally {
				uni.stopPullDownRefresh()
			}
		},
		// 上拉加载触发
		onReachBottom() {
			this.hasMore && this.getList(false)
		},
		onLoad(options) {
			this.handleFilter()
			this.$wxSdkUtil.init(null, { hideShare: true })
		},
		methods: {
			// 重新获取数据
			async handleFilter() {
				try {
					this.loading = true
					this.error = false
					queryParams.pageNum = 1
					await this.getList()
				} catch (error) {
					this.error = true
					this.errorMsg = error.message
				} finally {
					this.loading = false
				}
			},
			// 列表
			async getList(replace = true) {
				const params = {
					...queryParams,
					staffName: this.searchValue,
				}
				const { rows, total } = await staffList(params)
				if (replace) {
					this.staffList = rows
				} else {
					this.staffList.push(...rows)
				}
				this.hasMore = queryParams.pageNum * queryParams.pageSize < total
				queryParams.pageNum++
			},
			// 编辑
			handleUpdate(item) {
				uni.navigateTo({
					url: './update?staffId=' + item.id,
					events: {
						submit(data) {
							console.log('update submit')
							setTimeout(() => {
								uni.startPullDownRefresh()
							}, 300)
						},
					}
				}, true)
			},
			// 新增
			handleCreate() {
				uni.navigateTo({
					url: './create',
					events: {
						submit(data) {
							console.log('create submit')
							setTimeout(() => {
								uni.startPullDownRefresh()
							}, 300)
						}
					}
				}, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.staff {
		.search-nav {
			background-color: $u-nav-color;
			padding: 20rpx 30rpx;
		}
		.staff-item {
			display: flex;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			.staff-content {
				flex: 1;
				margin-left: 20rpx;
				.staff-title {
					font-size: 28rpx;
					font-weight: 500;
					color: $u-main-color;
				}
				.staff-label {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: $u-content-color;
				}
			}
		}
	}
</style>